<template>
    <div class="login-page">
        <div class="login-form">
            <div class="form">
                <div class="logo">
                    <img src="../static/img/logo.png"/>
                </div>
                <el-form label-width="0px" :model="loginForm" style="margin-top:20px" :rules="rules" ref="loginForm">
                    <el-form-item label="" prop="phone">
                        <el-input v-model="loginForm.phone" autofocus placeholder="手机号" style="width:340px"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="密码" style="width:340px"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="smsCode">
                        <el-input v-model="loginForm.smsCode"  placeholder="验证码" style="width:270px"></el-input>
                        <el-button type="text" style="width:70px;display: inline-block;font-size:18px;color:#f0433f;text-align: center;cursor: pointer" @click="createCode(4)">{{code}}</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="loginFn" :loading="btnLoading">登录</el-button>
                        <el-link type="info" style="margin-left:10px;line-height: 20px" @click="toForgetPassword">忘记密码</el-link>
                    </el-form-item>
                </el-form>
            </div>
            <div class="bg-img">
                <img src="../static/img/bgimgG.png"/>
            </div>
        </div>
        <login-bottom></login-bottom>
    </div>
</template>

<script>
  import {validatePhone} from '@/utils/validate';
  import loginBottom from '@/components/loginBottom';
  export default {
    name: 'login',
   components: { loginBottom },
    data() {
        const isvalidatePhone = (rule, value, callback) => {
            if(!validatePhone(value)){
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        };
        const isvalidatesmsCode = (rule, value, callback) => {
            if( value != this.code){
                callback(new Error('验证码输入不正确'))
            } else {
                callback()
            }
        };
      return {
          loginForm:{
              phone:'',
              password:'',
              smsCode:''
          },
          rules:{
              phone: [{ required: true, trigger: 'blur',validator: isvalidatePhone },],
              password: [{ required: true, trigger: 'blur',message: '请输入密码'},],
              smsCode: [{ required: true, trigger: 'blur',validator: isvalidatesmsCode },],
          },
          code:'',
          btnLoading:false
      }
    },
    methods: {
         //生成验证码的方法
         createCode(length){
                  let code = "";
                  let codeLength = parseInt(length); //验证码的长度
                  ////所有候选组成验证码的字符
                  let codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                      'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
                      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
                  //循环组成验证码的字符串
                  for (let i = 0; i < codeLength; i++)
                  {
                      //获取随机验证码下标
                      let charNum = Math.floor(Math.random() * 62);
                      //组合成指定字符验证码
                      code += codeChars[charNum];
                  }
                  this.code = code;
              },
        //登录
        loginFn(){
            this.$router.push({name:"home"});
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                   this.btnLoading = true;
                   if (this.loginForm.password == 'SolarPV123'){
                       //todo 跳转密码修改页
                       this.$router.push({name:"editPassword",params:{type:'edit'}});

                   }
                }
            });
        },
        //去忘记密码页
        toForgetPassword(){
            this.$router.push({name:"forgetPassword"});
        }
    },
    created() {
        this.createCode(4)
    }
  }
</script>



